<nz-spin [nzSpinning]="isSpinning">
    <div class="title-box">
        <input type="text" id="txtTitle" maxlength="100" placeholder="输入作品标题(>5字符)" [(ngModel)]="data.title" maxlength="20">
        <span class="max-length"><span class="max-length-change">{{data.title.length}}</span>/20</span>
    </div>
    <app-tinymce></app-tinymce>
    <div style="color: #999">注：富文本内容只保存在本地48小时，请尽快上传作品！</div>
    <div class="partake">
        <span class="partake-title">参与人员：</span>
        <div *ngFor="let item of data.partakeAdd;let i = index">
            <div class="partake-txt-box">
                <input type="text" class="partake-txt" [(ngModel)]="item.partakeTxt" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]{2,6}/g,'')" placeholder="输入姓名" maxlength="10">
                <i nz-icon nzType="close" nzTheme="outline" class="partake-del" (click)="partakeDel(i)"></i>
            </div>
        </div>
        <div class="partake-add" (click)="partakeAddMethod()">
            <i nz-icon type="plus-square" Theme="outline" class="partake-add-icon"></i>
            <span class="partake-add-name">添加成员</span>
        </div>
    </div>
    <div class="github">
        <span class="github-title">源码地址:</span>
        <input type="text" class="github-txt" placeholder="github或码云" [(ngModel)]="data.code">
    </div>
    <div class="synopsis">
        <span class="synopsis-title">作品简介:</span>
        <input type="text" class="synopsis-txt" [(ngModel)]="data.synopsis" maxlength="50" placeholder="请输入不少于 10 个字符的简介">
        <div class="synopsis-num-box">
            <span class="synopsis-num"><span class="max-length-change">{{data.synopsis.length}}</span>/50</span>
        </div>
    </div>
    <div class="cover">
        <span class="cover-title">作品封面:</span>
        <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload" [nzShowButton]="fileList.length < 1" nzSize=5120 nzFileType="image/png,image/jpeg" style="cursor:pointer; margin-left: 20px">
            <div style="border:1px solid #eee;border-radius: 3px; padding: 4px" class="upload" nzTitle="建议：300*250px" nzPlacement="top" nz-button nz-tooltip>
                <i nz-icon type="upload" style="margin:0px 4px"></i><span>上传</span>
            </div>
        </nz-upload>
    </div>
    <div class="superviseImage">
        <span class="supervise-title">图片管理:</span>
        <button nz-button nzType="default" (click)="open()" class="btn">浏览图片</button>
    </div>
    <nz-drawer [nzClosable]="false" [nzVisible]="visible" nzPlacement="right" [nzWidth]="500" nzTitle="预览图片复制图片地址" (nzOnClose)="close()">
        <div class="clearfix">
            <nz-upload nzAction="https://jsonplaceholder.typicode.com/posts/" nzListType="picture-card" [(nzFileList)]="imgList" [nzShowButton]="fileList.length < 0" [nzShowUploadList]="showUploadList" [nzPreview]="handlePreview">
                <i nz-icon nzType="plus"></i>
                <div class="ant-upload-text">Upload</div>
            </nz-upload>
            <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
                <ng-template #modalContent>
                    <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                </ng-template>
            </nz-modal>
        </div>
    </nz-drawer>
    <div class="txt-box">
        <input id="btnPublish" type="button" class="btn btn-outline-danger" value="发布作品" (click)="handleUpload()">
    </div>
</nz-spin>